<template>
	<view>
		<view class="search-box">
			<view class="search">
				<image src="../../static/search-img.png" mode=""></image>
				<input @input="resizeInput" v-model="search" type="text" placeholder="请输入关键词">
			</view>
		</view>
		
		<invite></invite>
		
		<view class="tags-box" v-if="current == 3">
			<view @click="select('')" :class="{'font':tag == ''}">默认</view>
			<view class="" @click="select(i.id)" v-for="(i,index) in tags" :class="{'font':tag == i.id}">{{i.name}}</view>
		</view>
		
		<view class="tag-box" v-if="current == 1">
			<fy-picker mode="multiSelector" v-model="data1Value" :range="range1" @confirm="onconfirm1">
			<view class="view">售价{{moneyrange}} <u-icon size="12" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon> </view>
			</fy-picker>
			<view class="" style="width: 100rpx;"></view>
			<fy-picker mode="multiSelector" v-model="data3Value" :range="range3" @confirm="onconfirm3">
			<view class="view">房型 <text v-if="num_room">{{num_room}}室{{num_parlor}}厅{{num_toilet}}卫</text> <u-icon size="12" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon> </view>
			</fy-picker>
		</view>
		
		<view class="tag-box" v-if="current == 2">
			<fy-picker mode="multiSelector" v-model="data2Value" :range="range2" @confirm="onconfirm2">
			<view class="view">租金{{moneyrange}} <u-icon size="12" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon> </view>
			</fy-picker>
			<view class="" style="width: 100rpx;"></view>
			<fy-picker mode="multiSelector" v-model="data3Value" houseType="666" :range="range3" @confirm="onconfirm3">
			<view class="view">房型 <text v-if="num_room">{{num_room}}室{{num_parlor}}厅{{num_toilet}}卫</text> <u-icon size="12" color="#DCDCDC" style="margin-left: 10rpx;" name="arrow-down-fill"></u-icon> </view>
			</fy-picker>
		</view>
		
		<!-- list -->
		<view class="list-box">
			<u-empty mode="list" v-if="houseList.length == 0" icon="http://cdn.uviewui.com/uview/empty/list.png">
			</u-empty>
			<view v-else class="each-box" @click="godetail(item.id)" v-for="(item,index) in houseList">
				<view class="img">
					<image :src="oss(item.face_image)" mode=""></image>
					<image class="video_img" v-if="item.video" style="width: 38rpx;height: 38rpx;" src="../../static/video.png" mode=""></image>
				</view>
				<view class="text-box">
					<view class="title"> <text class="top" v-if="item.switch">置顶</text> {{item.title}}</view>
					<view class="tags">
						<text class="each-tag" v-for="i in item.facilities">{{i}}</text>
					</view>
					<view v-if="current == 3" class="parameter">{{item.area}}㎡ / {{item.village}}</view>
					<view v-if="current != 3" class="parameter">{{item.num_room}}室{{item.num_parlor}}厅{{item.num_toilet}}卫 / {{item.area}}㎡ / {{item.village}}</view>
					
					
					<view class="price" v-if="current==1">
					    <text class="text">{{item.total_price==0?'面议':item.total_price}}</text> <text v-if="item.total_price != 0">万</text>
					</view>
					<view class="price" v-if="current==2">
						<text class="text">{{item.unit_price==0?'面议':item.unit_price}}</text> <text v-if="item.unit_price != 0">元/月</text> 
					</view>
					<view class="price" v-if="current==3">
						<text class="text">{{item.price==0?'面议':item.price}}</text> <text v-if="item.price != 0">元/月</text> 
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
		<!-- 发布信息 -->
		<view class="issue" @click="toIssue">
			发布信息
		</view>
		
		
		<u-tabbar
			:value="value1"
			@change="click1"
			:fixed="true"
			:placeholder="true"
			activeColor="#FEBF4E"
			:safeAreaInsetBottom="true"
		>
			
			
			<u-tabbar-item text="首页">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/indexA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/indexA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="服务">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/serveA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/serveA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="二手">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/uploada.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/uploada.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="招聘">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/releaseA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/releaseA.png"
				></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的">
				<image
					class="u-page__item__slot-icon"
					slot="active-icon"
					src="../../static/tab/myA.png"
				></image>
				<image
					class="u-page__item__slot-icon"
					slot="inactive-icon"
					src="../../static/tab/myA.png"
				></image>
			</u-tabbar-item>
			<!-- <u-tabbar-item text="我的" icon="account" ></u-tabbar-item> -->
		</u-tabbar>
	</view>
</template>

<script>
	import FyPicker from '@/components/fy-picker/fy-picker.vue'
	import invite from "@/components/invite.vue"
	export default {
		components: { FyPicker,invite },
		data() {
			return {
				page:1,
				houseList:[],
				current:0,
				status: 'loadmore',
				flag: false,
				data1Value: [],
				data2Value: [],
				data3Value: [],
				range1: ['0-50万','50-80万','80-120万','>120万'],
				range2: ['0-500','500-1000','1000-2000','>2000'],
				range3: [['1室','2室','3室','4室','5室','6室'], ['1厅','2厅','3厅','4厅','5厅','6厅'],['1卫','2卫','3卫','4卫','5卫','6卫']],
				search:'',//关键词
				num_room:'',//室
				num_parlor:'',//厅
				num_toilet:'',//卫
				moneyrange:'',//售价
				invite:'',
				tags:[],
				tag:'',
				
				value1:5,
				type:''
			}
		},
		onLoad(op) {
			console.log(op)
			this.type = op.type
			this.current = op.type == 'house' ? 1 : op.type == 'rent' ? 2 : op.type == 'transference' ? 3 : 0
			// this.value1 = this.current-1
			uni.setNavigationBarTitle({
			  title: op.title
			});
			if(op.type == 'house'){
				this.gethouseList()//二手房
			}
			if(op.type == 'rent'){
				this.getrentgetList()//出租房
			}
			if(op.type == 'transference'){
				this.gettransferenceList()//商业地产
			}
			this.getinvite()
			this.getTags()
		},
		// '蕲春房东直租的房子都在这里，房东直租，不收中介费' : this.sort == 3 ? '蕲春的门面、厂房、仓库、三农场地、生意转让信息都在这里' : '蕲春上万套二手房信息，房东直售，不收中介费'
		onShareTimeline(){
		    return{
		      title:this.current == 1 ? '蕲春上万套二手房信息，房东直售，不收中介费' : this.current == 2 ? '蕲春房东直租的房子都在这里，房东直租，不收中介费' : '蕲春的门面、厂房、仓库、三农场地、生意转让信息都在这里',  //分享的标题
		      query:{
				  type:this.type
			  },     //点击分享链接之后进入的页面路径
		      imageUrl:'', // 设置分享卡片图片
		    }
		},
		onReachBottom() {
			console.log('````````````')
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.status = 'loading';
			if(this.current == 1 || this.current == 0){
				this.gethouseList()//二手房
			}
			if(this.current == 2){
				this.getrentgetList()//出租房
			}
			if(this.current == 3){
				this.gettransferenceList()//商业地产
			}
		},
		methods: {
			click1(e) {
				console.log('click1', e);
				if(e==0){
					// uni.redirectTo({
					// 	url:'/pages/common/searchb?type=house&title=二手房'
					// })
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else if(e == 1){
					// uni.redirectTo({
					// 	url:'/pages/common/searchb?type=rent&title=租房'
					// })
					uni.switchTab({
						url:'/pages/serve/newserve'
					})
				}else if(e == 2){
					// uni.redirectTo({
					// 	url:'/pages/common/searchb?type=transference&title=商业地产'
					// })
					uni.switchTab({
						url:'/pages/index/indexa'
					})
					fail((e)=>{
					})
				}else if(e == 3){
					uni.switchTab({
						url:'/pages/release/release'
					})
					fail((e)=>{
					})
				}else if(e == 4){
					uni.switchTab({
						url:'/pages/my/my'
					})
					fail((e)=>{
					})
				}
			},
			toIssue(){
				if(!uni.getStorageSync('token')){
					uni.$u.route({
						url: 'pagesA/auth/login'
					})
					return
				}
				if(this.current == 1 || this.current == 0) {
					uni.navigateTo({
						url:'/pages/newissue/house'
					})
				}
				if(this.current == 2){
					uni.navigateTo({
						url:'/pages/newissue/renting'
					})
				}
				if(this.current == 3){
					uni.navigateTo({
						url:'/pages/newissue/realty'
					})
				}
			},
			select(e){
				this.tag = e
				this.page=1
				this.houseList=[]
				this.gettransferenceList()//商业地产
			},
			getTags(){
				uni.$u.http.post('/transference/transcate').then(res => {
					if (res.code == 1) {
						this.tags = res.data
					}
				}).catch((res) => {
				
				})
			},
			getinvite(){
				uni.$u.http.post('/index/invite').then(res => {
					if (res.code == 1) {
						this.invite = res.data
					}
				}).catch((res) => {})
			},
			resizeInput(){
				this.page=1
				this.houseList=[]
				if(this.current == 1 || this.current == 0){
					this.gethouseList()//二手房
				}
				if(this.current == 2){
					this.getrentgetList()//出租房
				}
				if(this.current == 3){
					this.gettransferenceList()//商业地产
				}
			},
			onconfirm1(e){
				console.log(e)
				this.moneyrange = e.selected[0].replace("万", "");
				this.page=1
				this.houseList=[]
				this.gethouseList()//二手房
				console.log(this.moneyrange)
			},
			onconfirm2(e){
				this.moneyrange = e.selected[0];
				this.page=1
				this.houseList=[]
				this.getrentgetList()//出租房
				console.log(this.moneyrange)
			},
			onconfirm3(e){
				this.num_room = e.selected[0].replace("室", "");
				this.num_parlor = e.selected[1].replace("厅", "");
				this.num_toilet = e.selected[2].replace("卫", "");
				console.log(this.num_room,this.num_parlor,this.num_toilet)
				this.page=1
				this.houseList=[]
				if(this.current == 1){
					this.gethouseList()//二手房
				}
				if(this.current == 2){
					this.getrentgetList()//出租房
				}
			},
			//商业地产
			gettransferenceList(){
				this.flag = false
				this.status = 'loading';
				uni.$u.http.post('/transference/getList',{
					page:this.page,
					search:this.search,
					transcate_id:this.tag
				}).then(res => {
					this.triggered = false;
					this._freshing = false;
					if (res.code == 1) {
						this.houseList = this.houseList.concat(res.data)
						if (res.data.length == 0) {
							this.status = 'nomore';
						} else {
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {
				
				})
			},
			//出租房
			getrentgetList(){
				this.flag = false
				this.status = 'loading';
				uni.$u.http.post('/rent/getList',{
					page:this.page,
					search:this.search,
					moneyrange:this.moneyrange,
					num_room:this.num_room,
					num_parlor:this.num_parlor,
					num_toilet:this.num_toilet
				}).then(res => {
					this.triggered = false;
					this._freshing = false;
					if (res.code == 1) {
						this.houseList = this.houseList.concat(res.data)
						if (res.data.length == 0) {
							this.status = 'nomore';
						} else {
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {
				
				})
			},
			gethouseList(){
				this.flag = false
				this.status = 'loading';
				uni.$u.http.post('/house/getList',{
					page:this.page,
					search:this.search,
					moneyrange:this.moneyrange,
					num_room:this.num_room,
					num_parlor:this.num_parlor,
					num_toilet:this.num_toilet
				}).then(res => {
					this.triggered = false;
					this._freshing = false;
					if (res.code == 1) {
						this.houseList = this.houseList.concat(res.data)
						if (res.data.length == 0) {
							this.status = 'nomore';
						} else {
							this.page++
							this.status = 'loadmore';
						}
						this.flag = true
						uni.stopPullDownRefresh();
					}
				}).catch((res) => {
				
				})
			},
			godetail(id) {
				uni.$u.route({
					url: '/pagesA/index/index_detail',
					params: {
						id,
						sort:this.current
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	.search-box {
		.search {
			width: 686rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 39rpx 39rpx 39rpx 39rpx;
			opacity: 1;
			margin: auto;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 28rpx;
				height: 28rpx;
			}
			input {
				width: 300rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #9A9EA3;
				text-align: center;
			}
		}
	}
	
	.group-box {
		width: 622rpx;
		height: 95rpx;
		padding: 32rpx;
		background: #FFF9EE;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: auto;
		margin-top: 32rpx;
		
		.group-l {
			display: flex;
			
			image {
				width: 95rpx;
				height: 95rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
			}
			.group-title {
				margin-left: 24rpx;
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
				.name {
					font-size: 24rpx;
					margin-top: 16rpx;
					font-weight: 500;
					color: #999999;
				}
			}
		}
		image {
			width: 18rpx;
			height: 28rpx;
		}
	}
	
	.tags-box {
		display: flex;
		margin-top: 38rpx;
		padding: 0 32rpx;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
		
		view {
			display: flex;
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
			margin-right: 62rpx;
		}
		.font {
			font-weight: bold;
		}
	}
	
	.tag-box {
		display: flex;
		margin-top: 48rpx;
		padding: 0 32rpx;
		.view {
			display: flex;
			font-size: 26rpx;
			font-weight: 500;
			color: #333333;
		}
	}
	
	.list-box {
		margin: 0rpx 30rpx;
		.each-box {
			width: 638rpx;
			// height: 220rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			opacity: 1;
			margin: auto;
			padding: 24rpx;
			margin-top: 24rpx;
			
			display: flex;
			align-items: center;
			.img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				background-color: #333333;
				position: relative;
				image {
					width: 220rpx;
					height: 220rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
				.video_img {
					position: absolute;
					top: 5rpx;
					left: 5rpx;
				}
			}
			.text-box {
				flex: 1;
				margin-left: 32rpx;
				
				.title {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
					.top {
						font-size: 24rpx;
						font-weight: 500;
						color: #333333;
						padding: 5rpx 8rpx;
						background: #FEBF4E;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						opacity: 1;
						display: inline-block;
						margin-right: 10rpx;
					}
				}
				.tags {
					margin-top: 21rpx;
					width: 380rpx;
					overflow: hidden;
					overflow-x: auto;
					white-space: nowrap;
					.each-tag {
						font-size: 20rpx;
						padding: 5rpx 8rpx;
						font-weight: 500;
						color: #666666;
						background-color: #F6F6F6;
						margin-right: 8rpx;
					}
				}
				.parameter {
					font-size: 22rpx;
					font-weight: 500;
					color: #333333;
					margin-top: 16rpx;
				}
				.price {
					font-size: 22rpx;
					font-weight: 800;
					color: #FA6759;
					margin-top: 18rpx;
					.text {
						font-size: 34rpx;
					}
				}
			}
			
		}
	}
	
	.issue {
		width: 60rpx;
		height: 60rpx;
		background: linear-gradient(180deg, #FECB6F 0%, #FFAE1C 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border-radius: 50%;
		font-size: 24rpx;
		font-weight: bold;
		color: #333333;
		padding: 20rpx;
		text-align: center;
		position: fixed;
		right: 32rpx;
		bottom: 180rpx;
	}
	
	
	.u-page__item__slot-icon {
		width: 32rpx;
		height: 32rpx;
	}
</style>